<template>
    <Editor :loading="loading.editor" :config="editorConfig">
      <span slot="actions">
        <a-button type="primary" @click="onSave" :loading="loading.save">保存</a-button>
      </span>
    </Editor>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import Editor from './Editor.vue'
  import { queryDocumentInfo, forceSaveDocumentInfo } from '@/api/onlyoffice'
  
  const loading = ref({
    editor: false,
    save: false
  })
  const detail = ref({})
  const editorConfig = ref({})
  
  // 获取文档配置信息
  const queryDocumentInfoFn = async () => {
    loading.value.editor = true
    try {
      const res = await queryDocumentInfo({ key: 'test5.docx', usePlugin: 'y' })
      const data = res.data || {}
      const { id, remarks } = data
      detail.value = { id, remarks }
      editorConfig.value = data.editorConfig
    } finally {
      loading.value.editor = false
    }
  }
  
  // 保存
  const onSave = async () => {
    loading.value.save = true
    try {
      const { key } = editorConfig.value.document
      const { id } = detail.value
      const res = await forceSaveDocumentInfo({ key, id })
      if (res.code === 0) {
        console.log('保存成功')
      } else {
        console.error(res.message)
      }
    } finally {
      loading.value.save = false
    }
  }
  
  onMounted(() => {
    queryDocumentInfoFn()
  })
  </script>